<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test_coos_canvas</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link href="../styles/util.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../scripts/coos.js"></script>
<script type="text/javascript" src="../scripts/coos.ext.canvas.js"></script>
<script type="text/javascript">
function hiddenTest2(){
	coos.$("test2Div").style.display = "none";
	coos.$("canvas2").style.display = "none";
}
function showTest2(){
	coos.$("test2Div").style.display = "";
	coos.$("canvas2").style.display = "";
}
//width:410px;height:160px;padding:5px;padding-bottom:0px;
</script>
<style type="text/css">
.testClass{width:410px;height:250px;padding:5px;padding-bottom:0px;}
</style>
</head>
<body>
<div style="float:left;width:500px;height:25px; padding-left:10px;background-color:#eee;height:600px;"><br/><br/>测试左边内容</div>
<div style="float:left;border:2px solid #000;width:400px;height:100%;text-align:center;padding:5px;">
  <div id="canvasDiv" clsass="testClass" style="display:none;" canvasTitle="{width:410,height:200,backgroundColor:'red',alpha:'0.4',corner:14,style:'display:none;'}">
     给需要title提示的div加个canvasTitle属性,系统自动识别<br>
     都使用默认配置，只需要加上 canvasTitle=""就可以了<br>
	 * @param color 边框颜色，默认为红色<br>
	 * @param radius 边框的弧度，默认为8<br>
	 * @param width 边框的宽度，默认取div的宽度，取不到默认为150<br>
 	 * @param height 边框的高度，默认取div的高度，取不到默认为30<br>
	 * @param corner 边框尖角的高度 宽度*2 默认为6<br>
	 * @param alpha 透明度，默认为1，不透明<br>
 	 * @param backgroundColor 背景色,默认没有背景色<br>
	 * @param style 边框的更多样式，默认为空<br>
	 * @param id canvas对象的ID,默认为div.id_canvas<br>
	 div隐藏时火狐获取不到top left属性,需要把该div放到一个不隐藏的div里面<br>
	 或者在显示时调用coos.canvas.title.show(obj);隐藏时调用coos.canvas.title.hide(obj);<br>
	 宽高放到class里面的必须传入指定宽高
  </div>
  <div onclick="coos.canvas.title.show('canvasDiv')" style="width:200px;height:20px;background-color:#eee;cursor:pointer;">onclick show title</div>
  <div onclick="coos.canvas.title.hide('canvasDiv')" style="width:200px;height:20px;background-color:#eee;cursor:pointer;margin-top:5px;">onclick hide title</div>
  <br><br><br><br>
   <div id="test2Div" style="width:390px;height:30px;padding:5px;text-align: center;"  canvasTitle="{color:'#FFB100',radius:8,corner:6,id:'canvas2'}">
     test2 {color:'#FFB100',radius:8,corner:6,id:'canvas2'}
  </div>
  <br><br>
  <div style="width:100px;height:15px;text-align:center;border: 1px solid #000;padding:5px;cursor:pointer;" onclick="hiddenTest2()">hidden test2</div>
  <br><br>
  <div style="width:100px;height:15px;text-align:center;border: 1px solid #000;padding:5px;cursor:pointer;" onclick="showTest2()">show test2</div>
  <br><br>
   <div id="test3Div" style="width:320px;height:20px;padding:5px;text-align:center;border: 1px solid #ccc;"  canvasTitle="{width:330,height:50,style:'padding:-5px;'}">
     test3 {width:330,height:50,style:'padding:-5px;'}
  </div>
</div>
</body>
</html>